import { useEffect, useState } from 'react';
import { Form, Row, Col, Input, Button, DatePicker, InputNumber, Select } from 'antd';
import ProCard from '@ant-design/pro-card';
import styles from '../index.less';
import { history } from 'umi';
import TextArea from 'rc-textarea';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default () => {
  const [form] = Form.useForm();
  const [title, setTitle] = useState('创建职位');

  useEffect(() => {
    if (history.location.query && history.location.query.title === 'positionDetail') {
      setTitle('职位详情');
    }
  }, []);

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  return (
    <PageHeaderWrapper title={title} >
      <ProCard
        title=""
        bordered
        headerBordered
        direction="column"
        gutter={[0, 16]}
        style={{ marginTop: 8 }}
      >
        <ProCard bordered bodyStyle={{ padding: 0 }}>
          <div className={styles.createTitle}>招聘信息</div>
          <Form
            form={form}
            // name="advanced_search"
            // className="ant-advanced-search-form"
            onFinish={onFinish}
            {...formItemLayout}
          >
            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="职位"
                  required
                  rules={[{ required: true, message: '职位名称不能为空' }]}
                  //   validateStatus="error"
                  //   help="Should be combination of numbers & alphabets"
                >
                  <Input placeholder="请输入职位名称" id="error" />
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="HC总数"
                  //   hasFeedback
                  //   validateStatus="validating"
                  //   help="The information is being validated..."
                >
                  <InputNumber
                    style={{ width: '100%' }}
                    precision={0}
                    placeholder="自动获取HC总数"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="招聘开始日期"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="success"
                >
                  <DatePicker style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="招聘截至日期"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="warning"
                >
                  <DatePicker style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="招聘负责人"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="error"
                  //   help="Should be combination of numbers & alphabets"
                >
                  <Select placeholder="请选择招聘负责人">
                    <Select.Option value="demo">焦凯</Select.Option>
                    <Select.Option value="demo1">贾赛</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="协同人">
                  <Select placeholder="请选择招聘协同人">
                    <Select.Option value="demo">焦凯</Select.Option>
                    <Select.Option value="demo1">贾赛</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="关联面试官"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="warning"
                >
                  <Select placeholder="关联面试官" mode="multiple" allowClear>
                    <Select.Option value="demo">焦凯</Select.Option>
                    <Select.Option value="demo1">贾赛</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="紧急程度"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="error"
                >
                  <Select defaultValue="demo">
                    <Select.Option value="demo">紧急</Select.Option>
                    <Select.Option value="demo1">一般</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24} className={styles.createbtn}>
                <Button type="primary" htmlType="submit">
                  确认修改
                </Button>
                <Button
                  style={{ margin: '0 8px' }}
                  onClick={() => {
                    form.resetFields();
                    history.goBack();
                  }}
                >
                  取消
                </Button>
              </Col>
            </Row>
          </Form>
        </ProCard>
        <ProCard bordered bodyStyle={{ padding: 0 }}>
          <div className={styles.createTitle}>HC明细</div>
          <Form
            form={form}
            name="advanced_search"
            // className="ant-advanced-search-form"
            onFinish={onFinish}
            {...formItemLayout}
          >
            <Row>
              <Col span={8} key={1}>
                <Form.Item label="招聘开始日期" required rules={[{ required: true }]}>
                  <DatePicker style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="数量" required rules={[{ required: true }]}>
                  <InputNumber style={{ width: '100%' }} precision={0} placeholder="" />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="需求类型"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="success"
                >
                  <Select placeholder="人员扩编">
                    <Select.Option value="demo">人员扩编</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="最晚到岗日期">
                  <DatePicker style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item label="需求提出人" required rules={[{ required: true }]}>
                  <Select placeholder="请选择需求提出人" mode="multiple" allowClear>
                    <Select.Option value="demo">焦凯</Select.Option>
                    <Select.Option value="demo1">贾赛</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="备注">
                  <TextArea style={{ width: '100%' }} autoSize={{ minRows: 1, maxRows: 6 }} />
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={24} className={styles.createbtn}>
                <Button type="primary" htmlType="submit">
                  添加
                </Button>
              </Col>
            </Row>
          </Form>
        </ProCard>
      </ProCard>
    </PageHeaderWrapper>
  );
};
